<template>
  <div>
    <pheader :width="'15%'">
      <template slot="left">入驻工单分析</template>
      <div style="text-align: right;margin-right: 32px;" slot="right">
        <Button type="primary" size="small" @click="exportData()">导出</Button>
      </div>
    </pheader>
    <tabContent>
      <template slot="content">
        <Form :label-width="100" label-position="right" >
	              <Row class=" header_title">
          <Col span="4">
          <FormItem label="工单号" style="margin-bottom: 0px;" :label-width="70">
            <Input v-model="searchInfo.reqId" placeholder="工单号" style="width:150px;" @on-enter="search(0)" />
          </FormItem>
          </Col>
          <Col span="6" class="col_paddingleft">
          <FormItem label="租户项目" style="margin-bottom: 0px;" :label-width="70">
            <Cascader v-model="selectList" :data="projectList" filterable :transfer="true" @on-change="selectProject">
            </Cascader>
          </FormItem>
          </Col>
          <Col span="8" class="col_paddingleft">
          <FormItem label="正式提交时间" style="margin-bottom: 0px;">
            <DatePicker type="date" placeholder="选择开始时间" format="yyyy-MM-dd" @on-change="changeStartTime"></DatePicker>
            <span>-</span>
            <DatePicker type="date" placeholder="选择结束时间" format="yyyy-MM-dd" @on-change="changeEndTime"></DatePicker>
          </FormItem>
          </Col>
          <Col span="6" style="text-align: end;">
          <Button type="primary" @click="search(0)">查询</Button>
          <Button type="primary" @click="refresh()">重置</Button>
          </Col>
          </Row>
        </Form>
        <Table ref="table" border :columns="columns" :data="data" :loading="tableLoading" style="margin-top: 4px;">
          <template slot-scope="{row, index}" slot="action">
            <Button type="primary" @click="toPage(row)">工单详情</Button>
          </template>
        </Table>

        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :current="searchInfo.page" :total="total" show-total show-elevator show-sizer @on-change="changePage"
              @on-page-size-change="changePageSize"></Page>
          </div>
        </div>
      </template>
    </tabContent>
  </div>
</template>
<script>
  import ajax from "../../ajax_util"
  import pheader from "../../comp_chatter/pheader"
  import tabContent from "../../comp_chatter/tab_content.vue"

  export default {
    components: {
      pheader,
      tabContent
    },

    data() {
      return {
        columns: [{
            title: '工单号',
            key: 'reqId',
            width: 180
          },
          {
            title: '工单标题',
            key: 'reqSubject'
          },
          {
            title: '租户名称',
            key: 'teneName'
          },
          {
            title: '入驻项目',
            key: 'projectName'
          },
          {
            title: '正式提交时间',
            key: 'startDate',
            width: 150
          },
          {
            title: '完成资源分配时间',
            key: 'endDate',
            width: 150
          },
          {
            title: '耗时(天)',
            key: 'intervalTime',
            width: 100
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 120
          }
        ],
        data: [],
        searchInfo: {
          current: 1,
          pageSize: 10,
          projectId: 0,
          reqId: "",
          startTime: 0,
          endTime: 0
        },
        total: 0,
        projectList: [],
        selectList: [],
        exportDatas: [],
        tableLoading: true,
        tabs: {},
      }
    },
    mounted() {
      this.search(0);
      this.getProjects();
      this.tabs = this.$store.state.tabs;
    },
    methods: {
      getProjects() {
        var that = this;
        var url = this.CONFIG.url_know + '/listTenantAndProject';
        ajax.get({
          url: url,
          that: that,
          success: function(data) {
            that.projectList = data;
          }
        })
      },
      selectProject(value, selectedData) {
        console.log("====selectProject===", value, this.selectList);
        this.searchInfo.projectId = value[1];
      },
      search(number) {
        if (number === 0) {
          this.searchInfo.current = 1;
        }

        var that = this;
        var url = this.CONFIG.progress_url + '/statistic/entry-analysis';

        ajax.get({
          url: url,
          that: that,
          params: that.searchInfo,
          success: function(data) {
            console.log("========getData========", data)
            that.data = that.setData(data.records);
            that.total = data.total;
            that.tableLoading = false;
          }
        })
      },
      changePage(page) {
        this.searchInfo.current = page;
        this.search(1);
      },
      changePageSize(pageSize) {
        this.searchInfo.pageSize = pageSize;
        this.search(0);
      },
      refresh() {
        this.searchInfo = {
          current: 1,
          pageSize: 10,
          projectId: 0,
          reqId: "",
          startTime: 0,
          endTime: 0
        };
        this.selectList = [];
        this.search(0);
      },
      formatDate(date) {
        return this.utils.formatDate(new Date(date * 1000), "yyyy-MM-dd")
      },
      changeStartTime(date) {
        if (date == undefined || date == null || date == "") {
          this.searchInfo.startTime = 0;
        } else {
          var time = (new Date(date).getTime() / 1000);
          this.searchInfo.startTime = time;
        }
        console.log("---------changeStartTime----------", date, this.searchInfo.startTime);
      },
      changeEndTime(date) {
        if (date == undefined || date == null || date == "") {
          this.searchInfo.endTime = 0;
        } else {
          var time = (new Date(date).getTime() / 1000);
          this.searchInfo.endTime = time;
        }
        console.log("---------changeEndTime----------", date, this.searchInfo.endTime);
      },
      exportData() {
        if (this.data == undefined || this.data == null || this.data.length < 1) {
          this.$Message.error("暂无信息可导出!")
        } else {
          var json = JSON.stringify(this.searchInfo);
          var params = JSON.parse(json);
          params.current = 1;
          params.pageSize = 1000;
          var that = this;
          var url = this.CONFIG.progress_url + '/statistic/entry-analysis';
          ajax.get({
            url: url,
            that: that,
            params: params,
            success: function(data) {
              var now = Date.parse(new Date()) / 1000;
              console.log("=======", now);
              console.log("-----data------", data);
              that.exportDatas = that.setData(data.records);
              that.$refs.table.exportCsv({
                filename: '入驻工单分析_' + now,
                columns: that.columns.filter((col, index) => index < 7),
                data: that.setExportDatas(that.exportDatas)
              });
            }
          })
        }
      },
      setExportDatas(exportDatas) {
        var json = JSON.stringify(exportDatas);
        var data = JSON.parse(json);

        data.forEach(item => {
          console.log("item", item);
          item.reqId = "\t" + item.reqId;
        })

        return data;
      },
      setData(data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].startTime != null && data[i].startTime != undefined) {
            data[i].startDate = this.formatDate(data[i].startTime);
          }

          if (data[i].endTime != null && data[i].endTime != undefined) {
            data[i].endDate = this.formatDate(data[i].endTime);
          }
        }
        return data;
      },
      toPage(row) {
        //console.log("----row--------",row);
        var isName = false
        var key = ""
        if (row.task_def_key != null) {
          key = row.reqId + row.task_def_key
        } else {
          key = row.reqId + ''
        }
        this.tabs.list.some(item => {
          if (item.tabKey === key) {
            isName = true
            return
          }
        })
        if (!isName) {
          var title = "工单详情 / 入驻服务申请";

          this.tabs.list.push({
            title: title,
            key: "handle",
            tabKey: key,
            params: {
              serviceType: row.serviceType,
              reqId: row.reqId,
              status: this.clickid,
              taskDefKey: row.task_def_key
            }
          })
        }
        this.tabs.isEdit = ""
        this.tabs.lastPage = this.tabs.tabsPage
        this.tabs.tabsPage = key
        this.$store.commit("tabs", this.tabs);
      },
    }
  }
</script>
<style lang="scss" scoped="">
  @import "../../utils/base.scss";
</style>
